<template>
    <div>
        <v-toolbar color="white" height="100" elevation="0">
            <v-row>
                <v-col cols="8">
                    <v-text-field
                        prepend-icon="search"
                        label="高级搜索"
                        outlined
                        v-model="inputMark"
                        class="hidden-sm-and-down"
                    ></v-text-field>
                </v-col>
                <v-col cols="4">
                    <v-select
                        :items="searchItems"
                        label="筛选"
                        prepend-icon="filter_list"
                        v-model="searchMark"
                        outlined
                    ></v-select>
                </v-col>
            </v-row>
        </v-toolbar>
        <v-divider></v-divider>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';

@Component
export default class Searchbar extends Vue {
    private searchMark: string = '';
    private inputMark: string = '';
    @Prop({ type: Array }) private searchItems!: string[];

    @Emit('getSelectMark') private search(path: string) {
        console.log(path);
    }

    @Emit('getInputMark') private input(path: string) {
        console.log(path);
    }

    private mounted() {
        console.log(this.searchMark, this.searchItems);
        this.search(this.searchMark);
        this.input(this.inputMark);
    }
}
</script>